<template>
  <div class="switch-work-space">
      <span
        v-for="(space, index) in conf.workSpaces"
        :key="index"
        :style="getSpanStyle(index, space)"
        :class="{active: conf.currentWorkspace && space.name === conf.currentWorkspace.name}"
        @click="conf.setDevWorkspace(space)"
      >{{space.dto.name}}</span>
  </div>
</template>
<script>
  export default {
    name: 'home',
    props: ["conf"],
    data() {return {}},
    computed: {},
    mounted() {},
    methods: {
      getSpanStyle(index, space){
        return {
          backgroundImage: `url(${space.dto.imgUrl})`,
        }
      },
    },
    watch: {},
  }
</script>

<style scoped>
  .switch-work-space {
    padding: 6px 10px;
    left: 0;
    top: 0;
    display: flex;
    border: 1px dashed var(--cl-major);
    margin-bottom: 10px;
  }

  .switch-work-space > span {
    flex: 1 1 auto;
    color: #fff;
    background-size: cover;
    background-position: center center;
    background-color: rgba(255, 255, 255, 1);
    display: inline-block;
    padding: 0 10px;
    line-height: 42px;
    height: 50px;
    margin: 0 10px;
    text-align: center;
    cursor: pointer;
    transition: all .3s;
    border: 4px solid transparent;
    text-shadow: 0 1px 4px var(--cl-major);
    border-radius: 4px;
  }

  .switch-work-space > span:hover {
    background-color: rgba(255, 255, 255, .8);
  }

  .switch-work-space > span:active {
    transform: scale(1, 1);
  }

  .switch-work-space > span.active {
    border: 4px solid var(--cl-major);
  }
</style>
